import Vue from 'vue'
import createApp from './main'
import searchDialog from '@/components/search'
import reportDialog from '@/components/report'
import imageViewer from '@/components/image-viewer'
import musicPlayer from '@/components/player';
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

Vue.mixin({
  beforeRouteUpdate (to, from, next) {
    const { asyncData } = this.$options
    if (asyncData) {
      asyncData({
        store: this.$store,
        route: to
      }).then(next).catch(next)
    } else {
      next()
    }
  }
  // 客户端下先放行view方案
  // beforeMount () {
  //   const { asyncData } = this.$options;
  //   if (asyncData) {
  //     this.dataPromise = asyncData({
  //       store: this.$store,
  //       route: this.$route,
  //     });
  //   }
  // },
})

const { app, router, store } = createApp()
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__);
}

// 将弹窗挂载到原型链上
searchDialog.store = store;
const searchBody = new Vue(searchDialog).$mount();
document.body.appendChild(searchBody.$el);
Vue.prototype.$searchOpen = searchBody.open;

// 将弹窗挂载到原型链上
reportDialog.store = store;
const reportBody = new Vue(reportDialog).$mount();
document.body.appendChild(reportBody.$el);
Vue.prototype.$reportOpen = reportBody.open;

// 将弹窗挂载到原型链上
imageViewer.store = store;
const imageViewerBody = new Vue(imageViewer).$mount();
document.body.appendChild(imageViewerBody.$el);
Vue.prototype.$imageViewer = imageViewerBody.open;

musicPlayer.store = store
const player = new Vue(musicPlayer).$mount();
document.body.appendChild(player.$el);
player.replaceSetting(false, true)
Vue.prototype.$player = player

nprogress.configure({
  easing: 'ease',  // 动画方式    
  speed: 500,  // 递增进度条的速度    
  showSpinner: false, // 是否显示加载ico    
  trickleSpeed: 200, // 自动递增间隔    
  minimum: 0.3 // 初始化时的最小百分比
})

router.beforeEach((to, from, next) => {
  nprogress.start();
  next();
});
router.afterEach(() => {
  nprogress.done()
})

router.onReady(() => {
  router.beforeResolve(async (to, from, next) => {
    const requireAuth = to.matched.some(record => record.meta.requiresAuth) || false
    const ignoreAuth = to.matched.some(record => record.meta.ignoreAuth) || true
    if (requireAuth && Object.keys(store.state.login.user).length === 0) {
      if (!ignoreAuth) {
        try {
          await store.dispatch('login/profile')
        } catch (err) {
          next({
            name: 'home'
          })
        }
      }
    }
    const matched = router.getMatchedComponents(to)
    const prevMatched = router.getMatchedComponents(from)
    let diffed = false
    const activated = matched.filter((c, i) => {
      return diffed || (diffed = (prevMatched[i] !== c))
    })
    const asyncDataHooks = activated.map(c => c.asyncData).filter(_ => _)
    if (!asyncDataHooks.length) {
      return next()
    }
    return Promise.all(asyncDataHooks.map(hook => hook({ store, route: to }))).then(() => {
      next()
    }).catch((err) => {
      if (err.url) {
        next({ name: err.url })
      } else if (err.response.status === 404) {
        next({ path: 404 })
      } else if (err.response.status === 401) {
        next({ path: '/' })
      } else if (err.response.status === 429) {
        next({ path: 'control-freq' })
      } else if (err.response.status >= 500) {
        next({ path: 'error' })
      } else {
        next()
      }
    })
  })
  return app.$mount('#app')
})
